<script setup lang='ts'>
import { ref, watch } from 'vue';
import { useRoute } from "vue-router";
import { useRouter } from 'vue-router';
const router = useRouter()
const isdata = ref<null | {}>(null)
const num = ref(0)
const newdata = ref()
const getData = ref()
const pageL = ref(0)
const pageR = ref(12)
const route = useRoute()
const { data, isTrue } = defineProps<{ data: any, isTrue: boolean }>()
watch(() => data, (value) => {
    console.log(value);

    num.value = value.length
    if (value.length === 0) return isdata.value = true
    isdata.value = false
    getData.value = data
    newdata.value = data.slice(pageL.value, pageR.value)
})
watch(() => route.query.title, (value) => {
    if (value) {
        pageL.value = 0
        pageR.value = 12
    }
})
const getpage = (e: number) => {
    if (e === 1) {
        pageL.value = 0
        pageR.value = 12
        newdata.value = getData.value.slice(pageL.value, pageR.value)
        return
    }
    pageL.value = (e - 1) * 12
    pageR.value = (e - 1) * 12 + 12
    newdata.value = getData.value.slice(pageL.value, pageR.value)

}
const routerDetailsPage = (e: string) => {
    router.push({ name: 'detailsPage', query: { type: e } })
}
</script>

<template>
    <el-skeleton style="width: 1500px;margin: auto;margin-top: 20px" v-if="isdata === null" :rows="10" animated />
    <el-empty class="empty" description="暂无数据" v-if="isdata" />
    <div class="contentpc" v-if="!isdata">
        <div class="data" v-for="i in newdata" @click="routerDetailsPage(i._id)">
            <img :src="i.imgdomainUrl" alt="">
            <div class="name">
                <p>{{ i.name }}</p>
                <p>源文件可编辑，关节可动</p>
            </div>
            <div class="text">
                <el-tag type="primary" style="margin-right: 5px;">11mb</el-tag>
                <el-tag type="info" style="margin-left: 5px;">fla</el-tag>
            </div>
        </div>
    </div>
    <div class="page" v-if="isTrue && num > 12">
        <el-pagination background layout="prev, pager, next" :page-size="12" :total="num" @change="getpage" />
    </div>
    <div class="h"></div>
</template>

<style scoped>
.h {
    height: 20px
}

.contentpc {
    max-width: 1500px;
    min-height: 0px;
    margin: auto;
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    text-align: center;
}

.empty {
    max-width: 1500px;
    min-height: 650px;
    margin: auto;
}

.page {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

.data {
    width: 100%;
    height: 430px;
    background-color: white;
    box-sizing: border-box;
    padding: 20px;
    transition: box-shadow 0.8s ease;
}

.data:hover {
    box-shadow: 0 0 5px 5px #ccc;
    cursor: pointer;
}

.text {
    width: 100%;
    margin-top: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.name {
    margin-top: 10px;
}

img {
    width: 100%;
    object-fit: cover;
    height: 300px;
}
</style>